<template>
  <div id="app" class="odd-job-task">
    <!-- 头部导航 -->
    <van-nav-bar
        left-text="返回"
        left-arrow
        @click-left="onClickBack"
    >
      <template slot="title"> <span>临时杂活列表</span> </template>
      <template slot="right">
        <van-button class="van-button-nav" plain type="primary" @click="jobFilterFn('')">增加</van-button>
      </template>
    </van-nav-bar>

    <van-row type="flex" align="center">
      <van-col>
        <van-field
            size="large"
            v-model="startDateParam"
            label="开始时间:"
            label-align="right"
            readonly
            placeholder="点击选择时间"
            @click="showDatePickerFn"
        />
      </van-col>
      <van-col>
        <van-field
            size="large"
            v-model="endDateParam"
            label="结束时间:"
            label-align="right"
            readonly
            placeholder="点击选择时间"
            @click="showDatePickerFn"
        />
      </van-col>
      <van-col>
        <van-field label="活动名称:" size="large" label-align="right" clearable clear-trigger="always" v-model="jobNameParam" placeholder="输入品名"/>
      </van-col>
      <van-col>
        <van-button plain style="font-size: 18px; height: 35px;" type="info" @click="loadJobTaskDataFn">查询</van-button>
      </van-col>
    </van-row>
    <van-calendar :min-date="minDate" :max-date="maxDate" v-model="showDatePicker" type="range" @confirm="confirmDateFilterFn" />

    <!-- 杂活任务表格 -->
    <div style="padding: 15px; height:78%;">
      <div>
        <van-row class="craft-row first" type="flex" justify="space-between" align="center">
          <van-col class="craft-row-col title dateTime"><span>创建时间</span></van-col>
          <van-col class="craft-row-col title"><span>临活名称</span></van-col>
          <van-col class="craft-row-col title"><span>发布人</span></van-col>
          <van-col class="craft-row-col title"><span>状态</span></van-col>
          <van-col class="craft-row-col title opt"><span>操作</span></van-col>
        </van-row>
      </div>
      <div style="max-height: 94%; overflow: auto">
        <van-row class="craft-row" :class="{ selected: curTaskRowIndex === index }" type="flex" justify="space-between" align="center" v-for="(row, index) in jobTaskData" :key="row.id" @click="selectTaskRowFn(row, index)">
          <van-col class="craft-row-col dateTime">
            <span> {{ row.createAt ? row.createAt : "&nbsp;" }}</span>
          </van-col>
          <van-col class="craft-row-col">
            <span> {{ row.jobName ? row.jobName : "&nbsp;"  }}</span>
          </van-col>
          <van-col class="craft-row-col">
            <span> {{ row.applicantName ? row.applicantName : "&nbsp;" }}</span>
          </van-col>
          <van-col class="craft-row-col">
            <span> {{ row.status ? getEnumLabel(oddJobStatus, row.status) : "&nbsp;" }}</span>
          </van-col>
          <van-col class="craft-row-col opt">
            <van-button type="info" @click="openWin4TaskDetailFn(row)">报工详情</van-button>
          </van-col>
        </van-row>
      </div>
    </div>
    <van-pagination v-model="pageNumber" :total-items="totalNum" :items-per-page="pageSize" :show-page-size="10" force-ellipses @change="loadJobTaskDataFn" />

    <!-- 增加任务 -->
<!--    <van-popup round  v-model="showChangeJobPop" :close-on-click-overlay="false" class="login-popup__filter" :closeable="true">
      <van-form style="padding:20px;margin-top:15px;" label-align="right" colon @submit="changeJobTaskFn">
        <van-search label="临活名称:" clear-trigger="always" clearable v-model="changeParams.jobName" @search="jobFilterFn"></van-search>
        <div style="margin: 30px;">
          <van-button style="font-size: 22px;" round block type="info" native-type="submit">{{ changeParams.addFlag ? "新增" : "修改" }}</van-button>
        </div>
      </van-form>
    </van-popup>-->

    <!-- 选择 -->
    <van-popup style="height:70%;" v-model="showJobSelectPop" round position="bottom">
      <van-picker ref="jobDataPickerRef" :visible-item-count="18" :loading="loading" show-toolbar :columns="jobData" @cancel="showJobSelectPop = false" @confirm="jobSelectConfirmFn"/>
    </van-popup>

  </div>
</template>

<script>
import { openWin } from "@/utils/index";
import dayjs from "dayjs";
import {changeJobTask, getEnumLabel, loadOddJobItemData, loadOddJobTaskData, oddJobAllocation, oddJobUnit, oddJobStatus} from "@/views/odd-job/index";
import {getInfo, setInfo} from "../../../utils/auth";
import { getRefreshToken } from "@/api/login";

export default {
  name: "oddJobTask",
  data() {
    return {
      oddJobAllocation: oddJobAllocation,
      oddJobUnit: oddJobUnit,
      oddJobStatus: oddJobStatus,

      //会话更新
      sessionTimer: {},

      /* 查询条件 */
      jobNameParam: "",
      minDate: new Date(2021, 0, 1),
      maxDate: new Date(2025, 10, 1),
      startDateParam: dayjs().format("YYYY-MM-DD"),
      endDateParam: dayjs().add(1, "day").format("YYYY-MM-DD"),
      showDatePicker: false,

      /* 增改 */
      // showChangeJobPop: false,
      changeParams: {
        id: "",
        jobId: "",
        jobName: "",
        allocation: "",
        unit: "",
        price: "",
        /*applicantId: "",
        applicantNo: "",
        applicantName: "",
        status: "",
        addFlag: true*/
      },
      //筛选杂活名称
      showJobSelectPop: false,
      loading: false,
      jobData: [],
      filterTimer: {},


      /* 分页表格 */
      curTaskRowIndex: -1,
      jobTaskData: [],
      pageNumber: 1,
      pageSize: 18,
      totalNum: 0
    }
  },
  mounted() {
    let that = this;
    if (process.env.NODE_ENV === "production") {
      that.$nextTick(() => {
        that.initFn(that);

        //直接弹选择框
        that.jobFilterFn("");
      });
    } else {
      window.apiready = function () {
        that.initFn(that);

        //直接弹选择框
        that.jobFilterFn("");
      };
    }
  },
  methods: {
    getEnumLabel,
    initFn(that) {
      that.sessionTimer = setInterval(() => {
        that.onGetRefreshToken();
      }, 600000);
      // 监听页面消失的时候，关掉页面就可以了
      window.api.addEventListener({
        name: "viewdisappear",
      }, function () {
        clearInterval(that.sessionTimer);
        window.api.closeWin();
      });
      //加载数据
      that.loadJobTaskDataFn();
    },
    // 刷新token
    onGetRefreshToken() {
      getRefreshToken({
        secret: getInfo().secret,
      },
      (res) => {
        setInfo(res);
      });
    },
    // 返回
    onClickBack() {
      openWin("index");
    },
    //展示日历并标记
    showDatePickerFn() {
      this.showDatePicker = true;
    },
    //确认选中日历区间
    confirmDateFilterFn(date) {
      this.showDatePicker = false;
      let [start, end] = date;
      this.startDateParam = dayjs(start).format("YYYY-MM-DD");
      this.endDateParam = dayjs(end).format("YYYY-MM-DD");
    },

    //筛选临活
    jobFilterFn(value) {
      let that = this;
      that.showJobSelectPop = true;
      that.loading = true;
      loadOddJobItemData({
        jobName: value
      }, res => {
        that.loading = false;
        res.forEach(job => {
          let items = job.jobName.split(":");
          job.text = items[0];
          job.children = [];
          items[1].split(",").forEach(child => {
            job.children.push(child);
          });
          that.jobData.push(job);
        });
      });

      /*let res = [{"id":3402,"allocation":2,"jobName":"装卸:成品,纱线,废毛,原料,助剂,坯布,杂品","unit":2,"price":null,"remark":""},{"id":3403,"allocation":2,"jobName":"辅助:机电帮工,挂粗纱,勾粗纱管,回收废纱边,拆坏布,工艺换筘,拆卷","unit":2,"price":null,"remark":""},{"id":3404,"allocation":2,"jobName":"修理:修理棕框","unit":2,"price":null,"remark":""},{"id":3405,"allocation":2,"jobName":"保洁:擦隔断窗,整理宝塔管,整理花园","unit":2,"price":null,"remark":""},{"id":3406,"allocation":2,"jobName":"剪修:纱线接断头,剪布样","unit":2,"price":null,"remark":""},{"id":3407,"allocation":2,"jobName":"打包:废毛打包","unit":2,"price":null,"remark":""},{"id":3408,"allocation":2,"jobName":"叠拉:仓库整理,出入库拉布,叠纱线","unit":2,"price":null,"remark":""},{"id":3409,"allocation":2,"jobName":"清理:管道,水沟,水池,废毛,条筒,排风扇,棕框","unit":2,"price":null,"remark":""},{"id":3410,"allocation":2,"jobName":"盘点:仓库盘库,配件仓库","unit":2,"price":null,"remark":""}];
      res.forEach(job => {
        let items = job.jobName.split(":");
        job.text = items[0];
        job.children = [];
        items[1].split(",").forEach(child => {
          job.children.push(child);
        });
        that.jobData.push(job);
      });*/
    },

    //零活选择  多列取值 为什么直接的items[1]=undef
    jobSelectConfirmFn(items, indexes) {
      let that = this;
      let curId = that.changeParams.id;
      let job = that.jobData[indexes[0]];
      job.jobName = items[0] + ":" + job.children[indexes[1]];
      Object.keys(job).forEach(key => {
        that.changeParams[key] = job[key];
      });
      that.changeParams.jobId = job.id;
      that.changeParams.id = curId;
      that.showJobSelectPop = false;
      that.changeJobTaskFn();
    },

    //增改任务
    changeJobTaskFn() {
      let that = this;
      changeJobTask(that.changeParams, () => {
        // that.showChangeJobPop = false;
        that.$toast.success("操作成功");
        that.loadJobTaskDataFn();
      });
    },

    //加载数据
    loadJobTaskDataFn() {
      let that = this;
      that.jobTaskData.splice(0, that.jobTaskData.length);
      loadOddJobTaskData({
        pageNum: that.pageNumber,
        pageSize: that.pageSize,
        jobName: that.jobNameParam,
        beginAt: that.startDateParam,
        endAt: that.endDateParam,
        applicantId: getInfo().userId
      }, res => {
        that.totalNum = res.totalRow;
        res.list.forEach(row => {
          that.jobTaskData.push(row);
        });
      });
    },
    //选中任务行
    selectTaskRowFn(row, index) {
      let that = this;
      that.curTaskRowIndex = index;
    },

    //打开报工详情页面
    openWin4TaskDetailFn(row) {
      openWin("odd-job-detail", row);
    }
  }
}
</script>

<style lang="scss">
.odd-job-task {
  margin-top: 5px;
  //导航栏样式
  .van-nav-bar {
    height: 60px;
    .van-icon {
      width: 50px;
      height: 50px;
    }
    .van-nav-bar__right {
      margin-top: 5px;
    }
    .van-button-nav {
      font-size: 28px;
      width: 150px;
    }
  }

  .van-field__label {
    font-size: 22px;
  }
  .van-field__body input {
    font-size: 22px;
    width: 150px;
  }

  .van-form {
    .van-search__label {
      font-size: 22px;
    }
    .van-field__body input {
      font-size: 22px;
      width: 300px;
    }
    .van-icon-search {
      font-size: 22px;
    }
  }

  //表格样式
  .craft-row {
    border-left: #323233 1px solid;
    line-height: 38px;
    height: 38px;
    &.selected {
      background-color: #e6a23c;
    }
    &.first {
      border-top: #323233 1px solid;
    }
  }
  .craft-row-col {
    text-align: center;
    font-size: large;
    height: 38px;
    overflow: hidden;
    flex: 1;
    border-right: #323233 1px solid;
    border-bottom: #323233 1px solid;
    .van-button {
      height: 38px;
    }
    &.title {
      font-weight: bolder;
    }
    &.dateTime {
      flex: 0 0 240px;
    }
    &.opt {
      display: flex;
      justify-content: center;
      align-items: center;
      button {
        height: 30px;
      }
    }
  }

  //picker选中
  .van-picker-column__item--selected {
    font-size: 32px;
    color: #08936c;
    font-weight: bold;
  }
  //picker取消
  .van-picker__cancel {
    font-size: 32px;
    font-weight: bold;
    color: red;
  }
  //picker确认
  .van-picker__confirm {
    font-size: 32px;
    font-weight: bold;
    color: #001e80;
  }

}
</style>